<template>
  <div class="main-container">
    <div class="main-header">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{path: '/customer/list'}">学员管理</el-breadcrumb-item>
        <el-breadcrumb-item>查看学员资料</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="wrap">
      <div class="content">
        <el-form class="mt-30 detail-form" ref="form" :model="form" label-width="150px" style="width: 800px;">
          <!-- <el-row> -->
            <div class="fl-l">
              <el-form-item label="昵称：" prop="nickName">
                <span>{{form.nickName}}</span>
              </el-form-item>
              <el-form-item label="姓名：" prop="realName">
                <span>{{form.realName}}</span>
              </el-form-item>
              <el-form-item label="手机：" prop="phoneNumber">
                <span>{{form.phoneNumber}}</span>
              </el-form-item>
            </div>
          
          <!-- </el-row> -->
          <div class="fl-l">
            <el-form-item label="电子邮箱：" prop="email">
            <span>{{form.email}}</span>
          </el-form-item>
          <el-form-item label="生日：" prop="dateOfBirth">
            <span>{{form.dateOfBirth}}</span>
          </el-form-item>
          <el-form-item label="企业名称：" prop="companyName">
            <span>{{form.companyName}}</span>
          </el-form-item>
          </div>
          
          <div class="fl-l">
            <el-form-item label="企业类型：" prop="companyType">
            <template v-for="item in companyTypeList">
              <span v-if="form.companyType==item.key">{{item.value}}</span>
            </template>
          </el-form-item>
          <el-form-item label="行业类型：" prop="industryType">
            <template v-for="item in industryTypeList">
              <span v-if="form.industryType==item.key">{{item.value}}</span>
            </template>
          </el-form-item>
          <el-form-item label="岗位类型：" prop="jobType">
            <template v-for="item in jobTypeList">
              <span v-if="form.jobType==item.key">{{item.value}}</span>
            </template>
          </el-form-item>
          </div>
          
          <div class="fl-l">
            <el-form-item label="学习目标：" prop="learnTarget">
            <span>{{form.learnTarget}}</span>
          </el-form-item>
          <el-form-item label="省份：" prop="provinceId">
            <span>{{form.provinceName}}</span>
          </el-form-item>
          <el-form-item label="城市：" prop="cityId">
            <span>{{form.cityName}}</span>
          </el-form-item>
          </div>
          

          <div class="fl-l">
            <el-form-item label="区：" prop="districtName">
            <span>{{form.districtName}}</span>
          </el-form-item>
          <el-form-item label="详细地址：" prop="addressInfo">
            <span>{{form.addressInfo}}</span>
          </el-form-item>
          <el-form-item label="性别：" prop="sex">
            <span v-if="form.sex == 0">男</span>
            <span v-if="form.sex == 1">女</span>
          </el-form-item>
          </div>          

          <div class="fl-l">
            <el-form-item label="状态：" prop="status">
            <span v-if="form.status == 0">正常</span>
            <span v-if="form.status == 1">禁用</span>
          </el-form-item>
          <el-form-item label="备注：" prop="memo">
            <div class="text-val">{{form.memo}}</div>
          </el-form-item>
          </div>
          
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        industryList: [],
        companyTypeList: [],
        jobTypeList: [],
        industryTypeList: [],
        form: {}
      }
    },
    activated() {
      this.loadData()
    },
    created() {
      this.initList()
      this.loadData()
    },
    methods: {
      initList(){
        this.$api.typeEnum.getIndustryType().then(res => {
          this.industryTypeList = res
        })
        this.$api.typeEnum.getCompanyType().then(res => {
          this.companyTypeList = res
        })
        this.$api.typeEnum.getJobType().then(res => {
          this.jobTypeList = res
        })
      },
      loadData() {
        this.form.customerId = this.$route.params.id
        this.$api.customer.getDetail(this.form.customerId).then(res => {
          if(res.success){
            this.form = res.data
          }
        })
      },
      goEdit() {
        this.$router.push('/customer/edit/' + this.form.customerId)
      }
    }
  }
</script>